import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb; // show表示只引入 kIsWeb
import 'package:flutter_email_ui/components/tags.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import '../controller/controller.dart';
import '../extensions.dart';

import '../constants.dart';
import '../responsive.dart';
import 'side_menu_item.dart';

class SideMenu extends StatefulWidget {
  const SideMenu({Key key}) : super(key: key);

  @override
  _SideMenuState createState() => _SideMenuState();
}

class _SideMenuState extends State<SideMenu> {
  final controller = NavController();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      padding: EdgeInsets.only(top: kIsWeb ? kDefaultPadding : 0),
      color: kBgLightColor,
      child: SafeArea(
          child: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),
        child: Column(
          children: [
            // 这里是logo 和关闭按钮
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Image.asset(
                  "assets/images/Logo Outlook.png",
                  width: 46,
                ),
                Spacer(),
                if (!Responsive.isDesktop(context)) CloseButton(),
              ],
            ),
            SizedBox(height: kDefaultPadding),
            TextButton.icon(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith(
                    (states) => kPrimaryColor),
                padding: MaterialStateProperty.all(
                  EdgeInsets.all(kDefaultPadding),
                ),
                shadowColor: MaterialStateProperty.all(
                  Colors.white,
                ),
                elevation: MaterialStateProperty.all(2.0),
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                )),
              ),
              onPressed: () {},
              icon: SvgPicture.asset("assets/Icons/Edit.svg", width: 16),
              label: Text("New message",
                  style: TextStyle(
                    color: Colors.white,
                  )),
            ).addNeumorphism(
              topShadowColor: Colors.white,
              bottomShadowColor: Color(0xFF234395).withOpacity(0.2),
            ),
            SizedBox(height: kDefaultPadding),
            TextButton.icon(
              style: ButtonStyle(
                backgroundColor:
                    MaterialStateProperty.resolveWith((states) => kBgDarkColor),
                padding: MaterialStateProperty.all(
                  EdgeInsets.all(kDefaultPadding),
                ),
                shadowColor: MaterialStateProperty.all(
                  Color(0xFF234395).withOpacity(0.2),
                ),
                elevation: MaterialStateProperty.all(2.0),
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                )),
              ),
              onPressed: () {},
              icon: SvgPicture.asset("assets/Icons/Download.svg", width: 16),
              label: Text("Get messages",
                  style: TextStyle(
                    color: kTextColor,
                  )),
            ).addNeumorphism(),
            // Menu Items
            GetX<NavController>(
                init: controller,
                initState: (_) {},
                builder: (_) {
                  return SideMenuItem(
                    id: 0,
                    press: (value) => _.nav = value,
                    title: "Inbox",
                    iconSrc: "assets/Icons/Inbox.svg",
                    index: _.nav,
                    itemCount: 3,
                  );
                }),
            GetX<NavController>(
                init: controller,
                initState: (_) {},
                builder: (_) {
                  return SideMenuItem(
                    id: 1,
                    press: (value) => _.nav = value,
                    index: _.nav,
                    title: "Sent",
                    iconSrc: "assets/Icons/Send.svg",
                    itemCount: 2,
                  );
                }),
            GetX<NavController>(
                init: controller,
                initState: (_) {},
                builder: (_) {
                  return SideMenuItem(
                    id: 2,
                    press: (value) => _.nav = value,
                    index: _.nav,
                    title: "Drafts",
                    iconSrc: "assets/Icons/File.svg",
                    itemCount: 5,
                  );
                }),

            GetX<NavController>(
                init: controller,
                initState: (_) {},
                builder: (_) {
                  return SideMenuItem(
                      id: 3,
                      press: (value) => _.nav = value,
                      index: _.nav,
                      title: "Deleted",
                      iconSrc: "assets/Icons/Trash.svg",
                      itemCount: 4);
                }),
            SizedBox(height: kDefaultPadding * 2),
            // Tags
            Tags(),
          ],
        ),
      )),
    );
  }
}
